<div id="root">
    <qf-table :data="tableData">
        <qf-table-column prop="id" label="编号1"></qf-table-column>
        <qf-table-column prop="id" label="编号2"></qf-table-column>
        <qf-table-column prop="name" label="姓名"></qf-table-column>
        <qf-table-column prop="age" label="年龄"></qf-table-column>
        <qf-table-column label="性别">
            <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
        </qf-table-column>
        <qf-table-column label="性别2">
            <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
        </qf-table-column>
    </qf-table>
</div>
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component("qfTableColumn", {
        props: ["prop", "label"],
        template: `<span />`,
        mounted() {
            this.$parent.column.push(this);
        },
    });
  
    Vue.component("qfTable", {
        data() {
            return {
                column: [],
            };
        },
        mounted() {
        console.log(this.column);
        console.log(this.column[4].$scopedSlots.default({ sex: 1 })[0].text);
        },
        props: {
            data: {
            type: Array,
            default: [],
            },
        },
        template: `<table border="1" cellpadding="10" cellspacing="0">
            <thead>
            <tr>
                <th v-for="item in column">{{item.label}}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="row in data">
            <td v-for="(col, index) in column">
                {{column[index].$scopedSlots.default ? column[index].$scopedSlots.default(row)[0].text : row[col.prop]}}
            </td>
            </tr>
            <slot></slot>
            </tbody>
        </table>`
    });
    const vm = new Vue({
        el: "#root",
        data: {
            tableData: [
            { id: 1, name: "张三", age: 3, sex: 1 },
            { id: 2, name: "赵四", age: 18, sex: 2 },
            { id: 3, name: "王五", age: 32, sex: 1 },
            { id: 4, name: "李六", age: 32, sex: 2 },
            ],
        },
        methods: {},
    });
</script>
  